<template>
    <div id="mytitle">
        <div class='mySearch-box'>
            <div class="logo">
                <img src="../assets/milogo.png" alt="">
            </div>
            <ul>
                <li>全部商品分类</li>
                <li>小米手机</li>
                <li>Redmi红米</li>
                <li>电视</li>
                <li>笔记本</li>
                <li>家电</li>
                <li>路由器</li>
                <li>智能硬件</li>
                <li>服务</li>
                <li>社区</li>
            </ul>
           <div class="search">
               <input type="text" placeholder="小米10">
               <div class="search-icon"> <i class="el-icon-search"></i> </div>
           </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'mySearch',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#mytitle{
    width: 100%;
    height:100px ;
    // background-color: chartreuse;
    .mySearch-box{
        width: 1226px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        color: #333333;
        .logo{
            width:55px;
            height: 55px;
            margin-top: 23px;
        }
        ul{
            width: 850px;
            display: flex;
            align-items: center;
            height: 100px;
            padding-left:38px ;
            box-sizing: border-box;
            li{
                padding: 0 10px;

            }
        }
        .search{
            width: 300px;
            height: 54px;
            margin-top: 25px ;
            line-height: 100px;
            position: relative;
            box-sizing: border-box;
            input{
                float: left;
                position: absolute;
                top: 0;
                border: 1px solid #aaa;
                left: 0;
                width: 245px;
                height: 50px;

            }
            .search-icon{
                width: 50px;
                height: 50px;
                border: 1px solid #aaa;
                position: absolute;
                text-align: center;
                line-height: 54px;
                right: 2px;
                top: 0;
            }

        }
    }
}
</style>
